<template>
	<block>
		<hxt-layout id="hxt-layout" title="视频" svc="video" initTitle="视频加载失败" @initPage="initPage">
			<view class="hxt-flex-column" style="background-color: #fff;">
				<view class="hxt-flex-fill" style="overflow: hidden;">
					<swiper :current="current" :circular="false" :vertical="true" @change="changefun"
						style="height: 100%;">
						<swiper-item v-for="(item,index) in videoList">
							<video v-if="!!item.miUrl" style="height: 100%;width: 100%;" :id="'id-'+index"
								:src="item.miUrl" loop :show-center-play-btn='false' :show-play-btn="false"
								show-fullscreen-btn enable-play-gesture="true"
								:picture-in-picture-mode="['push', 'pop']" @error="error"></video>
						</swiper-item>
					</swiper>
				</view>
				<van-tabbar :active="active" @change="change" :safe-area-inset-bottom="false" :fixed="false">
					<van-tabbar-item v-for="(item,index) in urlList" :name="item.id" :key="index" :icon="item.icon">
						{{item.text}}
					</van-tabbar-item>
				</van-tabbar>
			</view>
		</hxt-layout>
		<hxt-loading id="hxt-loading"></hxt-loading>
	</block>
</template>

<script>
	import hxt from "@/utils/hxt.js"
	export default {
		data() {
			return {
				video: '',
				videoList: [],
				urlList: [],
				active: 0, //0:小姐姐短视频 - 夏柔API,1:高质量小姐姐秒播线路 - 夏柔API,2:小姐姐短视频第二版 - 夏柔API 3:营养快线视频 - 免费API
				pageIndex: 1,
				current: 0,
			}
		},
		onShow: function(e) {},
		watch: {
			active: function(val) {
				var _this = this;
				_this.loadList();
			}
		},
		methods: {
			initPage: function(e) { //初始化事件
				var _this = this;
				hxt.post({
					url: hxt.domain + 'pc/mediaInfoTitle',
					data: {
						type: 4
					},
					ok: function(res) {
						if (res.data.code != 0) {
							if (!!e.callBack) e.callBack(res.data.errmsg);
							hxt.Notify({
								type: 'danger',
								message: '加载失败：' + res.data.errmsg + '，请稍后重试！'
							});
							return;
						};
						_this.urlList = res.data.data;
						var obj = res.data.data.find(function(item) {
							return item.isMain == 1
						});
						if (obj) {
							_this.active = obj.id;
						};
					},
					fail: function(res) {
						if (!!e.callBack) e.callBack(res.data.errmsg);
						hxt.Notify({
							type: 'danger',
							message: '加载失败：' + res.errMsg + '，请稍后重试！'
						});
					}
				});
			},
			changefun: function(e) {
				var _this = this,
					idx = e.detail.current;
				if (idx == _this.videoList.length - 1) {
					_this.pageIndex++;
					_this.loadList();
				};
				_this.$nextTick(function() {
					const query = wx.createSelectorQuery()
					query.select('#id-' + (idx - 1)).context(function(res) {
						console.log(res.context);
						res.context.pause();
					});
					query.select('#id-' + (idx + 1)).context(function(res) {
						console.log(res.context);
						res.context.pause();
					});
					query.select('#id-' + (idx)).context(function(res) {
						console.log(res.context);
						res.context.play();
					});
					query.exec();
					// var videoContext = uni.createVideoContext('id-' + (idx - 1), _this);
					// var currvideoContext = uni.createVideoContext('id-' + idx, _this);
					// var nextvideoContext = uni.createVideoContext('id-' + (idx + 1), _this);
					// videoContext.pause();
					// nextvideoContext.pause();
					// currvideoContext.play();
				});
			},
			loadList: function() {
				var _this = this;
				var obj = _this.urlList.find(function(item) {
					return item.id == _this.active;
				});
				
// 				for (var i=0;i<10;i++)
// 				{ 
// 				   hxt.post({
// 				   	url: 'https://api.qvqa.cn/api/cos?type=json',
// 				   	data: {},
// 				   	ok: function(res) {
// 				   		if (res.data.code != 200) {
// 				   			hxt.Notify({
// 				   				type: 'danger',
// 				   				message: '加载失败：' + res.data.errmsg + '，请稍后重试！'
// 				   			});
// 				   			return;
// 				   		};
// 				   		var mediaList = [{
// 				   			miType: 4,
// 				   			miUrl: res.data.data.video,
// 				   			miBase64: '',
// 				   			miImgUrl: obj.url,
// 				   			miTitle: '【' + obj.text + '】-' + obj.title,
// 				   			miDesc: ''
// 				   		}];
// 				   		hxt.post({
// 				   			url: hxt.domain + 'pc/mediaInfoSave',
// 				   			data: {
// 				   				miGroupKey: obj.groupKey,
// 				   				mediaList: encodeURI(JSON.stringify(mediaList))
// 				   			},
// 				   			ok: function(res) {
// 				   				if (res.data.code != 0) return hxt.Notify('提交失败：' + res.errmsg);
// 				   			}
// 				   		});
// 				   	},
// 				   	fail: function(res) {
// 				   		hxt.Notify({
// 				   			type: 'danger',
// 				   			message: '加载失败：' + res.errMsg + '，请稍后重试！'
// 				   		});
// 				   	}
// 				   });
// }
				
// 				return;
				if (_this.pageIndex == 1) _this.videoList = [];
				hxt.post({
					url: hxt.domain + 'pc/mediaInfoList',
					data: {
						miGroupKey: obj.groupKey,
						pageSize: 2,
						pageIndex: _this.pageIndex,
					},
					ok: function(res) {
						if (res.data.code != 0) {
							hxt.Notify({
								type: 'danger',
								message: '加载失败：' + res.data.errmsg + '，请稍后重试！'
							});
							return;
						};
						if (res.data.data.rowCount <= _this.videoList) return;
						_this.videoList = _this.videoList.concat(res.data.data.list);
						if (_this.pageIndex == 1) {
							_this.current = -1;
							_this.$nextTick(function() {
								_this.current = 0;
								const query = wx.createSelectorQuery()
								query.select('#id-0').context(function(res) {
									res.context.play();
								});
								query.exec();
								// var currvideoContext = uni.createVideoContext('id-' + 0, _this);
								// currvideoContext.play();
							})
						};

					},
					fail: function(res) {
						hxt.Notify({
							type: 'danger',
							message: '加载失败：' + res.errMsg + '，请稍后重试！'
						});
					}
				});
			},
			change: function(e) {
				this.pageIndex = 1;
				this.active = e.detail;
			},
			error: function(e) {
				console.log(e.detail.errMsg)
				// hxt.Notify({
				// 	type: 'danger',
				// 	message: '播放失败：' + e.detail.errMsg + '，请稍后重试！'
				// });
			},
			show: function() {
				var _this = this;
				wx.previewMedia({
					sources: [{
						url: _this.video,
						type: 'video'
					}]
				});
			}
		}
	}
</script>

<style>

</style>
